<html>
    
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
    </body> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coze Chat</title>
    <script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js"></script>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let chatSdk = new CozeWebSDK.WebChatClient({
                config: {
                    bot_id: '7547979490996797455',
                },
                componentProps: {
                    title: '渔菜学苑',
                },
                "auth": {
                    "type": "token",
                    "token": "{{access_token}}11",
                    // onRefreshToken: function () {
                    //     //这里应该是一个函数用来调用后端方法，根据refresh Token 获取token ，而不是直接返回token 
                    //     return "KQbaMZFT4QebeFdsacde873VUSG4QA8cPaoHE3XyeV7kiYvkJSdCI68oVd59DzxTZfsL0p6q";
                    // }

                    onRefreshToken: async () => {
                        console.log("token已经过期，需要调用refresh token 刷新token",当前refresh_token)

                    }
                },
                userInfo: {
                    id: '987',
                    url: 'https://iknow-pic.cdn.bcebos.com/3b292df5e0fe9925d3bb44d026a85edf8cb171fe',
                    nickname: '测试用户',
                },
                ui: {
                    base: {
                        icon: 'https://iknow-pic.cdn.bcebos.com/3b292df5e0fe9925d3bb44d026a85edf8cb171fe',
                        // layout: 'pc',
                        zIndex: 1000,
                    },
                    // 悬浮球
                    asstBtn: {
                        isNeed: false,
                    }, 
                    //多个会话的会话列表
                    conversations: {
                        isNeed: true  
                    },
                    // 顶部导航栏和图标
                    header: {
                        isShow: true,
                        isNeedClose: false,
                    },
                    // 底部提示文字
                    footer: {
                        isShow:false,
                        expressionText: '测试文字',
                    },
                    chatBot: {
                        title: "渔菜学苑",//标题
                        isNeedFunctionCallMessage:true,//显示插件调用信息
                        isNeedAddNewConversation:true,//是否可以创建新的会话 
                        isNeedQuote:true,//是否可以对回复的消息进行追问
                        uploadable: true,//是否显示文件上传按钮
                        // width: 800,
                        // el: undefined,
                        isNeedAddNewConversation: true,
                        isNeedQuote: true,   
                        onHide: () => {
                        // todo...
                          console.log("聊天框隐藏")
                        },
                        onShow: () => {
                        // todo...
                          console.log("显示聊天框")
                        }
                    }
                },
               

            });

            chatSdk.showChatBot();
        });
    </script>
</body>
</html>